<template>

  <table class="table">
    <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">原因内容</th>
      <th scope="col">启用状态</th>
      <th scope="col">修改启用状态</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(item, index) in allList" :key="item.defaultReasonNumber">
      <th scope="row">{{++index}}</th>
      <td>{{item.defaultReason}}</td>
      <td>{{item.usedStatus==1?'已启用':'未启用'}}</td>
      <td><button @click="changeStatus(item)">切换</button></td>
    </tr>

    </tbody>
  </table>

</template>

<script>
export default {
  name: 'DefaultReason',
  data(){
    return {
      allList:[]

    }
  },

  methods: {
    async getAllReasonList(){
      const {data: res} = await this.$http.get('/defaultReason/getAllReason')
      this.allList=res.data
    },

    async changeStatus(item){
      const {data: res} = await this.$http.get('/defaultReason/change?defaultReasonNumber='+item.defaultReasonNumber
          +'&usedStatus='+item.usedStatus)
      await this.getAllReasonList()
    }

  },

  created() {
    this.getAllReasonList()
  }


}


</script>

<style lang="less" scoped>

</style>